<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://unpkg.com/vue@3"></script>
</head>
<body>

    <div id="app">
        <h1>知识点1：v-model双向绑定</h1>
        <h3>
            我们可以使用v-model指令在表单input、textarea、select等元素进行双向绑定
            它会根据控件的类型自动获取正确的方法来更新元素。v-model会忽略所有表单元素的value等初始值
        </h3>

        <h3>1.单行文本框</h3>
        姓名：<input type="text" v-model="singleText">尊敬的{{singleText}}用户你好
        <h3>2.多行文本框</h3>
        介绍：<textarea name="" id="" v-model="multiText"></textarea>
        我们输入的介绍是：{{multiText}}
        <h3>3.单选框</h3>
        <h4>
            单选框在实际开发中是不可单独使用的，一般要两个以上，只要统一设置变量，就可以实现radiogroup的效果
        </h4>
        性别：<input type="radio" value="男神" v-model="radioValue">男神
        <input type="radio" value="女神" v-model="radioValue">女神
        <br>原来你是个{{radioValue}}
        <h3>4.单个复选框</h3>
        <h4>
            单个复选框通常用true和false进行解释
        </h4>
        <input type="checkbox" v-model="toggleValue">是否好孩子
        {{toggleValue}}
        <h3>5.多个复选框：v-model接收数组类型的变量</h3>
        你的爱好：
        <input type="checkbox" value="唱歌" v-model="checkValue">唱歌
        <input type="checkbox" value="吃饭" v-model="checkValue">吃饭
        <input type="checkbox" value="睡觉" v-model="checkValue">睡觉
        <input type="checkbox" value="游戏" v-model="checkValue">游戏
        <br>你的爱好是：{{checkValue.join(',')}}
        <h3>6.单项下拉框</h3>
        <select name="" id="" v-model="singSelect">
            <option value="Java">Java</option>
            <option value="Python">Python</option>
            <option value="Vue">Vue</option>
            <option value="C">C</option>
        </select>
        <br>
        我知道你喜欢的是{{singSelect}}
        <h3>7.多项下拉框</h3>
        <select name="" id="" multiple v-model="multiSelect">
            <option value="A">我是A</option>
            <option value="B">我是B</option>
            <option value="C">我是C</option>
            <option value="D">我是D</option>
            <option value="E">我是E</option>
        </select>
        <br>我挑选了这些：{{multiSelect}}
       
        <h1>课堂小练习</h1>
        <br>用户名：<input type="text" v-model="user">
        <br>密码：<input type="password" v-model="password">
        <br>确认密码：<input type="password" v-model="password_again" @blur="check()">
        <!--  <br>性别：<input type="text" v-model="sex">  --> 
        <br>籍贯：<input type="text" v-model="jg">
        <br> 选择的课外课程：
        <input type="checkbox" value="吉他" v-model="like">吉他
        <input type="checkbox" value="国画" v-model="like">国画
        <input type="checkbox" value="街舞" v-model="like">街舞
        <input type="checkbox" value="书法" v-model="like">书法
        <br><button @click="show()">提交</button>


        <h1>知识点2：v-model修饰符</h1>
        <h3>1.lazy修饰符 ,v-model 在每次input事件触发后将输入框的数据与变量同步，添加lazy修饰附后，改成与change事件同步</h3>

        <input type="text" v-model.lazy="text">{{text}}

        <h3>2.number修饰符，如果用户想自动将输入的值转换为数值类型，可以使用.number</h3>
        <input type="text" v-model.number="num">{{num}}

        <h3>3.trim修饰符，如果想自动过滤前后的空白字符，可以加.trim修饰符</h3>
        <input type="text" v-model.trim="text">{{text+"hello"}}
    </div>
</body>
</html>

<script>
    const app = Vue.createApp({
        //写变量的地方
        data() {
            return {
                singleText:'',
                multiText:'',
                radioValue:'',
                toggleValue:false,
                checkValue:[],
                singSelect:'',
                multiSelect:[],
                user:'',
                password:'',
                password_again:'',
                sex:'',
                jg:'',
                like:[],
                text:'',
                num:'',
            }
        },
        //写方法的地方
        methods: {
            show(){
                alert("尊敬的"+this.jg+this.user+"用户,"+"你是一位"+this.radioValue+",你选择的课程是："+this.like.join(','))
            },
            check(){
                if(this.password !== this.password_again){
                    alert("密码不一样")
                    this.password=''
                   this.password_again=''
                }
            }
        },
    }).mount("#app")

</script>